<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus @keydown.enter="add" v-model.trim="title"/>
  </header>
</template>

<script>
export default {
  data(){
    return {
      title:'',
    }
  },
  methods:{
    //添加
    add(){
      //非空校验
      if(!this.title) return
      this.$emit('addTodo',this.title)
      //添加完清空表单
      this.title=''
    }
  }
};
</script>

<style>
</style>